<template>
  <div class="notification-badge" @click="showNotifications">
    <el-badge :value="unreadCount" :max="99" class="notification-icon">
      <el-icon :size="20"><Bell /></el-icon>
    </el-badge>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAppStore } from '@/stores/appStore'
import { Bell } from '@element-plus/icons-vue'

const appStore = useAppStore()

const unreadCount = computed(() => appStore.unreadCount || 0)

function showNotifications() {
  // 这里可以触发显示通知列表的逻辑
  console.log('显示通知列表')
}
</script>

<style scoped>
.notification-badge {
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.notification-badge:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.notification-icon :deep(.el-badge__content) {
  background-color: #ff4d4f;
  border: none;
}

.notification-icon :deep(.el-icon) {
  color: #666;
}
</style>